<template>
  <div>
    <el-input :disabled="!!$route.query.labelId" type="text" @focus="showSelectBox" v-model="datasetName" v-if="datasetName" />
    <el-button type="text" @click="showSelectBox" v-else>+添加</el-button>
    <el-dialog :visible.sync="showSelectDialog" title="添加数据集" @onClose="onClose" width="1040px">
      <el-input placeholder="请输入内容" v-model="search" size="small" @keydown.enter="enter" @input="selectName" class="input-with-select">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
     
      <ul class="infinite-list clearfix">
        <li v-for="(item, index) in tableData" :key="index" class="infinite-list-item">
          <div @click="currentSelect(index)" :class="['adorn-checkbox',  {'checkbox-false': datasetTmp != index},{'checkbox-true': datasetTmp == index}]"></div>
          <v-image class="dimg" :src="item.avatarPath" />
          <div class="datas-box">
            <div>
              <p class="pall datasname">
                {{ item.name }}
              </p>
              <p class="pall pcontents" :title="item.description">
                {{ item.description }}
              </p>
            </div>
          </div>
        </li>
      </ul>
      <div class="page-nb">
        <div class="page-nb-pagination" style="text-align: center" v-if="datasetsTotal > 4">
          <el-pagination background layout="total, prev, pager, next, jumper" :page-size="4" @current-change="handleCurrentChange" :current-page="datasetsPage" :total="datasetsTotal">
          </el-pagination>
        </div>
      </div>
          
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="surebtn">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { getDataSetLis } from "@/api/dataset";
import { debounce } from "@/utils/tool";
import { listByPage } from "@/api/file";
import { mediaFormat } from '@/utils/maps'
export default {
  name: 'plugInDataset',
  data () {
    return {
      showSelectDialog: false,
      search: "",
      datasetsTotal: 0,
      tableData: [],
      activeName: '1',
      datasetsPage: 1,
      // originaldatasets: [],
      datasetTmp: -1,
      datasetName: "",
      datasets: []
    }
  },
  watch: {
    defaultDatasets(val){
      this.valueDatasets(val)
      console.log(val)
    },
    defaultDatasetsName(val){
      // this.valueDatasets(val)
      this.datasetName = val
      console.log(val)
    }
  },
  props: ['defaultDatasets', 'defaultDatasetsName'],
  methods: {
    showSelectBox () {
      this.valueDatasets(this.defaultDatasets)
      this.showSelectDialog = true;
    },
    async verdictFils(fn, noneFn) {
      let dataset = this.datasetTmp != -1 ? this.tableData[this.datasetTmp].id : this.$route.query.datasetId
      dataset = this.defaultDatasets ? this.defaultDatasets : dataset
      let info = await this.$myInfo(this)
      let tenantId = info && info.orgId
      let queryParams = {
        bizId: dataset,
        relativePath: '/editable',
        tenantId,
        type: 'dataset',
        showHidden: false,
        page: 1,
        pageSize: 100,
      };
      let res = await listByPage(queryParams);
      console.log(res.data.files)
      
      let picSuffix = []
      for (let i in mediaFormat) {
        if (mediaFormat[i] == 'pic') {
          picSuffix.push(i)
        }
      }
      let index = 0
      res.data.files.forEach(e => {
        if (picSuffix.indexOf(e.suffix) != -1) {
          index ++
        }
      })
      if (index == 0) {
        this.$message.error("该数据集下没有图片，请选择其他数据集。")
        if (noneFn) {
          noneFn()
        }
        return
      } else {
        if (fn) {
          fn()
        }
      }
    },
    async surebtn () {
      this.verdictFils(() => {
        this.$emit('infoDataset', this.tableData[this.datasetTmp])
        this.showSelectDialog = false;
        this.$emit('onClose', false)
      })
    },
    currentSelect (index) {  //公开数据集选择事件
      this.datasetTmp = index
      this.datasetName = this.tableData[this.datasetTmp].name
      
    },
    async getDatasets () {
      let params = {
        current: this.datasetsPage,
        size: 4,
        visibility: this.activeName,
        order: "recommend",
        name: this.search,
        // versionCount: 1,
      }
      if (this.activeName == '1') {
        params.projectId = this.$route.query.id
      } else {
        params.projectId = null
      }
      let res = await getDataSetLis(params);
      this.datasetsTotal = res.pagination.total;
      this.tableData = res.result;
      this.tableData.forEach((e, i) => {
        if (e.id == this.defaultDatasets) {
          this.verdictFils(() => {
            this.datasetTmp = i
            this.datasetName = e.name
          }, () => {
            this.datasetName = ''
          })
        } else {
          this.datasetTmp = -1
        }
      })
    },
    selectName () {
      debounce(() => {
        this.getDatasets();
      }, 400)()
    },
    enter () {
      this.getDatasets();
    },
    handleCurrentChange (val) {
      this.datasetsPage = val;
      this.getDatasets();
    },
    onClose () {
      this.showSelectDialog = false;
      this.$emit('onClose', false)
    },
    valueDatasets (defaultV) {
      this.tableData.forEach((e, i) => {
        if (e.id == defaultV) {
          this.datasetTmp = i
          this.datasetName = e.name
        }
      })
    }
  },
  mounted () {
    this.getDatasets()
    this.valueDatasets(this.defaultDatasets)
    
  },
  destroyed () {

  }
}
</script>

<style lang="less" scoped>
.infinite-list {
  min-height: 380px;
  margin-top: 20px;
}
.infinite-list-item {
  margin-bottom: 20px;
  float: left;
  //width: 496px;
  width: 992px; //数据集改版后调整为一行一个
}
.elrowgutter {
  /deep/.el-button--default {
    margin-left: 100px;
    width: 80%;
    background-color: #f5f7fa;
    color: #1e2480;
    margin-bottom: 20px;
  }

  /deep/.el-form-item__label {
    text-align: right;
    padding-right: 30px;
  }
}
.delnode {
  margin-left: 73%;
}
.run-model-title {
  color: @deepgray;
}
.run-model-table {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 0 8px;
  margin-top: 6px;
  .r-m-box {
    border-top: 1px solid #e8e8e8;
    height: 38px;
    line-height: 38px;
    .r-m-name {
      float: left;
      width: 148px;
      padding-left: 14px;
    }
    .r-m-product {
      float: left;
      width: 250px;
    }
    .r-m-command {
      float: left;
      width: 120px;
      .popover {
        cursor: pointer;
        i {
          font-size: 16px;
          color: @blue;
        }
      }
    }
    .r-m-number {
      float: left;
    }
  }
  .no-border {
    border: 0;
  }
}

.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
}

.checkbox-true {
  background: url(~@/assets/img/checkbox-true.jpg) no-repeat;
  background-size: 18px 18px;
}
.checkbox-false {
  background: url(~@/assets/img/checkbox-false.jpg) no-repeat;
  background-size: 18px 18px;
}
.adorn-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  float: left;
  margin-top: 20px;
  margin-right: 10px;
}
.dimg {
  width: 123px;
  height: 75px;
  float: left;
}

.datas-box {
  float: left;
  width: 296px;
  .datasname {
    vertical-align: top;
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box; //将元素设为盒子伸缩模型显示
    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
    -webkit-line-clamp: 1;
  }
  .pcontents {
    margin: 15px 0 0 5px;
    font-size: 14px;
    color: #606266;
    line-height: 24px;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .pall {
    overflow: hidden;
    margin-left: 5px;
  }
}
.version-box {
  float: right;
  .sb {
    /deep/.el-input.el-input__inner {
      border-color: #4285f4 !important;
      font-size: 12;
    }
  }
}
.dataset-tags-box {
  // width: 240px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  .dataset-addr {
    padding-left: 10px;
    line-height: 30px;
    float: left;
  }
  .delstr {
    color: red;
  }
}
.dataset-tags {
  // display: block;
  // max-width: 240px;
  float: left;
  /deep/ .el-tag__close {
    float: left;
    margin-top: 6px;
  }
  .dataset-tags-word {
    // display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 140px;
    float: left;
  }
}
</style>
